import React, { useState } from 'react';
import { Card, Typography, Table, Modal, Tag, Button, Select, Space } from 'antd';

const { Title } = Typography;
const { Option } = Select;

const Step3PurchaseRequest = () => {
    // 模拟采购单数据
    const mockPurchaseListTable = [
        {
            numbering: 'PO2023001',
            name: '上海中心大厦项目采购',
            purchaser: 1,
            project: 1,
            status: 1,
            total_cost: 5000
        },
        {
            numbering: 'PO2023002',
            name: '城市花园项目采购',
            purchaser: 2,
            project: 2,
            status: 3,
            total_cost: 8600
        }
    ];

    // 模拟采购材料数据
    const mockPurchaseList = [
        {
            subtotal: 141950.00,
            numbering: 'PO2023001',
            supplier: 1,
            name: '商品混凝土',
            specification: 'C30',
            quantity: 300,
            unit: '立方米',
            unitPrice: 450,
            rate: 0.05,
            other_fee: 200,
            remark: '快递费200',
            status: 5,
            purchaseTime: '2023-03-10',
            paymentTime: '2023-03-11',
        },
        {
            subtotal: 32000.00,
            numbering: 'PO2023001',
            supplier: 2,
            name: '钢筋',
            specification: 'HRB400',
            quantity: 10,
            unit: '吨',
            unitPrice: 3200,
            rate: 0.05,
            other_fee: 0,
            remark: '',
            status: 1,
            purchaseTime: '2023-03-12',
            paymentTime: '',
        },
        {
            subtotal: 2100.00,
            numbering: 'PO2023002',
            supplier: 3,
            name: '防水涂料',
            specification: '桶装',
            quantity: 20,
            unit: '桶',
            unitPrice: 105,
            rate: 0.05,
            other_fee: 100,
            remark: '含运费',
            status: 2,
            purchaseTime: '2023-03-20',
            paymentTime: '',
        }
    ];

    const userMap = {
        1: '张三',
        2: '李四',
        3: '王五',
    };

    const PurchaseListTableStatus = {
        1: '草稿',
        2: '待审核',
        3: '已审核',
        4: '已完成',
        5: '已取消'
    };

    const statusMean = {
        1: '审核中',
        2: '未付款',
        3: '已取消',
        4: '已完成',
        5: '已付款'
    };

    const [selectedPurchase, setSelectedPurchase] = useState(null);
    const [visible, setVisible] = useState(false);
    const [filterStatus, setFilterStatus] = useState(null);
    const [purchaseList, setPurchaseList] = useState(mockPurchaseList);

    const showPurchaseDetail = (record) => {
        setSelectedPurchase(record);
        setFilterStatus(null);
        setVisible(true);
    };

    const handleStatusChange = (item, newStatus) => {
        setPurchaseList((prev) =>
            prev.map((p) =>
                p.name === item.name && p.numbering === item.numbering
                    ? { ...p, status: newStatus }
                    : p
            )
        );
    };

    const columns = [
        { title: '编号', dataIndex: 'numbering', key: 'numbering' },
        { title: '名称', dataIndex: 'name', key: 'name' },
        {
            title: '采购人',
            dataIndex: 'purchaser',
            render: (id) => userMap[id]
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (v) => <Tag color="blue">{PurchaseListTableStatus[v]}</Tag>
        },
        {
            title: '操作',
            render: (_, record) => (
                <Button type="link" onClick={() => showPurchaseDetail(record)}>
                    查看材料
                </Button>
            )
        }
    ];

    const materialColumns = [
        { title: '材料名称', dataIndex: 'name' },
        { title: '规格', dataIndex: 'specification' },
        { title: '数量', dataIndex: 'quantity' },
        { title: '单价', dataIndex: 'unitPrice' },
        { title: '小计', dataIndex: 'subtotal' },
        {
            title: '状态',
            dataIndex: 'status',
            render: (v) => <Tag color="purple">{statusMean[v]}</Tag>
        },
        {
            title: '修改状态',
            render: (_, item) => (
                <Select
                    value={item.status}
                    style={{ width: 120 }}
                    onChange={(value) => handleStatusChange(item, value)}
                >
                    {Object.entries(statusMean).map(([k, v]) => (
                        <Option key={k} value={parseInt(k)}>{v}</Option>
                    ))}
                </Select>
            )
        }
    ];

    const filteredMaterials = selectedPurchase
        ? purchaseList.filter(
            (item) =>
                item.numbering === selectedPurchase.numbering &&
                (filterStatus ? item.status === filterStatus : true)
        )
        : [];

    return (
        <div>
            <Title level={4}>采购单列表</Title>

            <Card style={{ marginTop: 20 }}>
                <Table
                    dataSource={mockPurchaseListTable}
                    columns={columns}
                    rowKey="numbering"
                    pagination={false}
                />
            </Card>

            <Modal
                title={`采购单材料明细 - ${selectedPurchase?.name || ''}`}
                open={visible}
                onCancel={() => setVisible(false)}
                width={900}
                footer={null}
            >
                <Space style={{ marginBottom: 16 }}>
                    <span>状态筛选：</span>
                    <Select
                        allowClear
                        placeholder="选择状态"
                        style={{ width: 160 }}
                        onChange={(val) => setFilterStatus(val)}
                    >
                        {Object.entries(statusMean).map(([k, v]) => (
                            <Option key={k} value={parseInt(k)}>{v}</Option>
                        ))}
                    </Select>
                </Space>

                <Table
                    dataSource={filteredMaterials}
                    columns={materialColumns}
                    rowKey={(r) => r.name + r.numbering}
                    pagination={false}
                />
            </Modal>
        </div>
    );
};

export default Step3PurchaseRequest;
